<template>
  <div class="rights">
    <!-- 面包屑 -->
    <el-breadcrumb separator="/" style="line-hegiht:45px">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
        <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <div>
      <el-button type="success" plain @click='adddialogFormVisible=true'>添加角色</el-button>
    </div>
    <!-- 表单 -->
    <template>
      <el-table
        :data="roleList"
        border
        style="width: 100%;margin-top:15px">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-row v-for="first in props.row.children" :key="first.id" style="margin-bottom: 10px;">
              <el-col :span="4"><div class="grid-content bg-purple">
                <el-tag
                  closable
                  type="success"
                  @close='delPower(props.row,first.id)'>
                  {{first.authName}}
                </el-tag>
              </div></el-col>
              <el-col :span="20"><div class="grid-content bg-purple-light">
                <el-row v-for="second in first.children" :key="second.id" style="margin-bottom: 8px;">
                  <el-col :span="4"><div class="grid-content bg-purple">
                    <el-tag
                      closable
                      type="warning"
                      @close='delPower(props.row,second.id)'>
                      {{second.authName}}
                    </el-tag>
                  </div></el-col>
                  <el-col :span="20"><div class="grid-content bg-purple-light">
                    <el-tag
                      v-for="third in second.children" :key="third.id"
                      style="margin-bottom: 8px; margin-right: 10px;"
                      closable
                      type="info"
                      @close='delPower(props.row,third.id)'>
                      {{third.authName}}
                    </el-tag>
                  </div></el-col>
                </el-row>
              </div></el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column
        type="index"
        width="50"></el-table-column>
        <el-table-column
          prop="roleName"
          label="角色名称"
          width="500">
        </el-table-column>
        <el-table-column
          prop="roleDesc"
          label="描述"
          width="500">
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="编辑" placement="top">
              <el-button type="primary" plain icon="el-icon-edit" @click="getMessage"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="top">
              <el-button type="primary" plain icon="el-icon-delete" @click="getMessage"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="分配权限" placement="top">
              <el-button type="primary" plain icon="el-icon-share" @click="showRoleForm(scope.row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <!-- 添加角色 -->
    <el-dialog title="添加角色" :visible.sync="adddialogFormVisible">
      <el-form :model="addform" label-width="80px" :rules="rules" ref="addform">
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="addform.roleName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="roleDesc">
          <el-input v-model="addform.roleDesc" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="adddialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSubmitForm('addform')">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 角色授权 -->
    <el-dialog title="分配权限" :visible.sync="roledialogFormVisible">
      <div style="height:400px;overflow:auto">
        <el-tree
          :data="roleData"
          show-checkbox
          node-key="id"
          :default-expand-all='true'
          :props="defaultProps"
          ref="tree">
        </el-tree>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="roledialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="getCheckedNodes">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getRoleList, addRoleList, getRightList, empowerRole, delRolePower} from '@/api/index.js'
export default {
  data () {
    return {
      roleList: [],
      adddialogFormVisible: false,
      addform: {
        roleName: '',
        roleDesc: ''
      },
      rules: {
        roleName: [
          { required: true, message: '请输入角色名称', trigger: 'blur' }
        ],
        roleDesc: [
          { required: true, message: '请输入角色描述', trigger: 'blur' }
        ]
      },
      roledialogFormVisible: false,
      roleData: [],
      defaultProps: {
        children: 'children',
        label: 'authName'
      },
      roleId: '',
      rids: ''
    }
  },
  mounted () {
    this.updatePage()
  },
  methods: {
    // 角色权限删除
    delPower (value, rightId) {
      delRolePower({roleId: value.id, rightId: rightId}).then(res => {
        if (res.meta.status === 200) {
          this.$message.success(res.meta.msg)
          // 重新刷新数据,不能刷新页面(刷新页面会把打开的权限表关闭,显得很怪)
          // value中传过来的数据中有权限列表的数距,反馈回来的信息res中也有已经删除了权限的数组,直接替换用于刷新
          value.children = res.data
        } else {
          this.$message.error(res.meta.msg)
        }
      })
    },
    // 角色授权
    getCheckedNodes () {
      // 获取选中的数组
      var checkArr = this.$refs.tree.getCheckedNodes()
      // 在数组的平方根中获取id 和 pid
      var allArr = checkArr.map(val => {
        return val.id + ',' + val.pid
      })
      // 把数组中的所有数据连在一起（变成字符串）
      var connectArr = allArr.join(',')
      // 把字符串再次转为数组
      var marArr = connectArr.split(',')
      // 把数组去重
      var clearArr = Array.from(new Set(marArr))
      // 最后再变成为字符串
      var lastArr = clearArr.join(',')
      this.rids = lastArr
      empowerRole({roleId: this.roleId, rids: this.rids}).then(res => {
        if (res.meta.status === 200) {
          this.$message.success(res.meta.msg)
        } else {
          this.$message.error(res.meta.msg)
        }
        // 刷新页面
        this.updatePage()
        // 关闭对话框
        this.roledialogFormVisible = false
      })
    },
    // 角色授权框展示
    showRoleForm (value) {
      this.roledialogFormVisible = true
      getRightList('tree').then(res => {
        console.log(res)
        this.roleData = res.data
      })
      this.roleId = value.id
    },
    // 添加角色
    addSubmitForm (addform) {
      this.$refs[addform].validate((valid) => {
        if (valid) {
          addRoleList(this.addform).then(res => {
            if (res.meta.status === 201) {
              this.adddialogFormVisible = false
              this.$refs[addform].resetFields()
              this.$message.success(res.meta.msg)
              this.updatePage()
            } else {
              this.$message.error(res.meta.msg)
            }
          })
        } else {
          return false
        }
      })
    },
    updatePage () {
      getRoleList().then(res => {
        this.roleList = res.data
      })
    },
    getMessage () {
      alert('暂无此功能')
    }
  }
}
</script>

<style lang="scss" scoped>
.el-breadcrumb {
  background-color: #F5F5F5;
  height: 45px;
  font-size: 15px;
  padding-left: 10px;
  line-height: 45px;
  margin-bottom: 15px;
}
</style>
